import { SystemSettingsGetInfo, SystemSettingsUpdate } from '@/services/common';
import {
  PageContainer,
  ProCard,
  ProForm,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Breadcrumb, Button, Form, message } from 'antd';
import { useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom';
import './index.less';

const SettingsMsg = () => {
  const [form] = Form.useForm<any>();
  const [baseData, setBaseData] = useState<any>(null);
  const handleSave = async () => {
    const values = await form.validateFields();
    const res = await SystemSettingsUpdate({
      ...values,
      id: baseData.id,
    });
    if (res.code === 200) {
      message.success('保存成功');
    }
  };
  const getSettingsInfo = async () => {
    const res = await SystemSettingsGetInfo();
    if (res.code === 200) {
      form.setFieldsValue({ systemPageSize: res.data.systemPageSize });
      setBaseData(res.data);
    }
  };
  useEffect(() => {
    getSettingsInfo();
  }, []);
  return (
    <PageContainer
      className="settings-msg-wrapper"
      header={{
        title: <></>,
        ghost: true,
        breadcrumbRender: (route: any) => {
          return (
            <Breadcrumb
              items={[
                {
                  title: (
                    <div
                      style={{
                        display: 'flex',
                        alignContent: 'center',
                      }}
                    >
                      <NavLink to="/settingsMsg">设置管理</NavLink>
                      <div
                        className="ant-breadcrumb-separator"
                        aria-hidden="true"
                      >
                        /
                      </div>
                      <div>设置管理</div>
                    </div>
                  ),
                },
              ]}
            ></Breadcrumb>
          );
        },
      }}
    >
      <ProCard>
        <ProForm
          submitter={false}
          form={form}
          initialValues={{ systemPageSize: '9' }}
        >
          <div className="setting-list">
            <span>分区展示数量：</span>
            <ProFormSelect
              style={{ width: 200 }}
              name="systemPageSize"
              valueEnum={{
                '2': '2个分区展示',
                '9': '9个分区展示',
              }}
              placeholder="请选择"
              allowClear={false}
            />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button type="primary" onClick={handleSave}>
              保存
            </Button>
          </div>
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};
export default SettingsMsg;
